<template>
  <el-menu
    :default-active="route.path"
    class="ele-menu"
    :class="theme ? theme : ''"
    :background-color="menuBackground"
    :text-color="menuForeground"
    :unique-opened="uniqueOpened"
    @select="handleSelect"
  >
    <template v-for="menu in routes" :key="menu.path">
      <ele-menu-item v-if="!menu.meta.hidden" :item="menu">
        <template #default="item">
          <slot v-bind="item">
            <i
              class="ele-menu-icon"
              v-if="item.meta?.icon"
              :class="item.meta.icon"
            />
            <span v-if="item.meta?.title">{{ item.meta.title }}</span>
          </slot>
        </template>
      </ele-menu-item>
    </template>
  </el-menu>
</template>
<script setup lang="ts">
import { computed, defineProps, toRaw, toRefs } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { ElMenu } from 'element-plus'
import { useCurrentRoutes } from '../composables/index'
import { checkUrl } from '../utils/index'
import EleMenuItem from './MenuItem.vue'
import type { IRouteRecordRaw } from '../types/index'

const props = defineProps<{
  routes?: IRouteRecordRaw[]
  theme?: string
  uniqueOpened?: boolean
}>()
const { theme, uniqueOpened } = toRefs(props)
const route = useRoute()
const router = useRouter()
const routes = useCurrentRoutes(props)

const menuBackground = computed(() => {
  return theme && theme.value === 'black' ? '#191a23' : '#ffffff'
})
const menuForeground = computed(() => {
  return theme && theme.value === 'black' ? '#ffffff' : '#191a23'
})

function handleSelect(path: string) {
  if (checkUrl(path)) {
    window.open(path)
  } else {
    router.push(path)
  }
}
</script>
<style lang="postcss">
.ele-menu.el-menu {
  border-right: 0;
}
.ele-menu.el-menu .el-submenu__title * {
  vertical-align: 0%!important;
}
.ele-menu.el-menu .el-menu-item,
.ele-menu.el-menu .el-submenu__title i,
.ele-menu.el-menu .el-submenu__title span {
  font-size: 13.6px;
  color: #515a6e!important;
}
.ele-menu.el-menu .is-active {
  color: #409eff!important;
}
.ele-menu.el-menu.black .el-menu-item,
.ele-menu.el-menu.black .el-submenu__title i,
.ele-menu.el-menu.black .el-submenu__title span {
  font-size: 13.6px;
  color: hsla(0,0%,100%,.7)!important;
}
.ele-menu.el-menu.black .el-submenu.is-active>.el-submenu__title *{
  color: white!important;
}
.ele-menu.el-menu .ele-menu-icon {
  display: inline-block;
  width: 24px;
  height: 24px;
  line-height: 21px;
  vertical-align: middle;
  text-align: center;
  margin-right: 8px;
}
.ele-menu.black .el-submenu .el-menu {
  background-color: #000c17 !important;
}
.ele-menu.black .el-submenu .el-menu .el-menu-item {
  background-color: #000c17 !important;
}
.ele-menu.black .el-submenu .el-menu .el-menu-item:first-child {
  margin-top: 4px;
}
.ele-menu.black .el-submenu .el-menu .el-menu-item:last-child {
  margin-bottom: 4px;
}
.ele-menu.black .el-submenu .el-menu .el-menu-item.is-active {
  background-color: #409eff !important;
  color: white !important;
}
.ele-menu .el-submenu__icon-arrow {
  font-weight: 500!important;
  font-size: 12px!important;
}
</style>
